<template>
  <div class="hall_room">
    <div class="search">
      <span>
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-liaotianshi-dating'></use>
        </svg>
        聊天大厅</span>
      <serach-vue @seach="serach"></serach-vue>
    </div>
    <ul class="room_list">
      <li @click="toRoom(item)" class="room_box" v-for="(item,index) in res" :key="index" :title="item.title">
         <div class="img">
           <svg class='icon' aria-hidden='true'>
            <use :xlink:href='icon(item.channel)'></use>
           </svg>
         </div>
         <div class="room_info">
           <span class="title">标题：{{item.title}}</span>
           <span class="count">
             <div>
                <svg class='icon' aria-hidden='true'>
                  <use xlink:href='#icon-renshu'></use>
                </svg>
                <span>{{item.count}}</span>
             </div>
             <svg class='icon password' v-if="item.password" aria-hidden='true'>
               <use xlink:href='#icon-mimabeifen'></use>
             </svg>
           </span>
         </div>
      </li>
    </ul>
    <div class="notList" v-if="roomList.length == 0">
      <svg class='icon' aria-hidden='true'>
        <use xlink:href='#icon-baoqian'></use>
      </svg>
      <span>抱歉~暂无聊天室</span>
    </div>
    <div class="paging" v-else>
      <button :disabled="paging.index==1" @click="paging.index--">《</button>
      <button>{{paging.index}}</button>
      <button :disabled="paging.index==num" @click="paging.index++">》</button>
    </div>
    <to-room v-if="RoomInfo" @off="RoomInfo=null" :RoomInfo="RoomInfo"></to-room>
  </div>
</template>

<script>
import serachVue from "../info/serach.vue"
import toRoom from "./toRoom.vue"
import ToRoom from "./toRoom.vue";
export default {
  name: 'HallList',

  data() {
    return {
      roomList: [], // 所有房间数据集
      RoomInfo: null, // 弹窗房间信息
      paging: { // 分页数据
        index: 1,
        count: 30
      }
    };
  },

  computed:{
    // 返回房间图标
    icon(){
      return (icon) => {
        switch(icon){
          case '生活情感': return '#icon-qinggan'
          case '学习交流': return '#icon-xuexi'
          case '娱乐游戏': return '#icon-yule'
          case '聊天交友': return '#icon-jiaoyou'
          default: return '#icon-jishiliaotian'
        }
      }
    },
    // 分页过滤
    res(){
      return this.roomList.slice((this.paging.index-1)*this.paging.count,this.paging.index*this.paging.count)
    },
    // 最大页数
    num(){
      return Math.ceil(this.roomList.length/this.paging.count)
    }
  },

  props: {
    // 菜单过滤后的数据集
    filterRoom: Array
  },

  watch: {
    filterRoom(newVal){
      this.roomList = newVal
      this.paging.index = 1
    },
    roomList(){
      this.paging.index = 1
    }
  },

  methods: {
    // 打开进入房间弹窗
    toRoom(item){
      this.RoomInfo = null
      setTimeout(() => {this.RoomInfo = item},200)
    },
    // 查询过滤
    serach(val){
      this.roomList = this.filterRoom.filter(v => v.title.indexOf(val) != -1)
    }
  },

  components:{
    serachVue,
    toRoom,
    ToRoom
}
};
</script>

<style scoped>
.hall_room{
  background-color: white;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  position: relative;
}
.search{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid gray;
}
.search span{
  font-size: 1.2rem;
  font-weight: 600;
  color: tomato;
  letter-spacing: 6px;
  display: flex;
  align-items: center;
}
.search span .icon{
  font-size: 2rem;
  margin-right: 5px;
}
.room_list{
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.room_list .room_box{
  width: auto;
  height: 50px;
  border-radius: 20px;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 10px;
  transition: all .3s ease;
}
.room_list .room_box:hover{
  box-shadow: 0 0 6px gray;
  transform: translateY(-5px);
}
.room_list li .img{
  font-size: 2em;
}
.room_list .room_info{
  display: flex;
  flex-direction: column;
  font-size: 0.6rem;
  color: gray;
}
.room_info .title{
  display: inline-block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room_info .count{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.room_info .count .icon{
  font-size: 2em;
  vertical-align: middle;
}
.room_info .count .password{
  font-size: 0.8rem;
}
.paging{
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: flex-end;
}
.paging button{
  display: inline-block;
  width: 25px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  background-color: white;
  border: 1px solid gray;
  font-size: 0.5rem;
  text-align: center;
  cursor: pointer;
}
.paging button:nth-child(2){
  border-left: none;
  border-right: none;
  background-color: green;
  color: white;
}
.notList{
  margin-top: 20px;
  font-size: 0.8rem;
  text-align: center;
  color: gray;
}
.notList .icon{
  font-size: 2rem;
}
</style>